<template>
  <div>
    <div class="herdertop">
      <img src="../../assets/top.png" alt="" class="topImg" />
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>服务商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品分组</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="center">
      <el-card>
        <el-row>
          <el-button
            style="background-color:#fd804c;color: #fff;"
            @click="addGoodsClassifyHandle"
            >新增分类</el-button
          >
        </el-row>

        <el-row style="margin-top: 20px">
          <el-table
            :show-header="true"
            :data="classifyList"
            style="width: 100%;margin-bottom: 20px;"
            row-key="classifyCode"
            default-expand-all
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          >
            <el-table-column prop="classifyName" label="分组名称">
            </el-table-column>
            <el-table-column label="服务商品数量">
              <template slot-scope="scope">
                <span v-if="scope.row.parentClassifyCode !== null">
                  {{
                    scope.row.serviceGoodsNum === null
                      ? 0
                      : scope.row.serviceGoodsNum
                  }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="前端显示">
              <template slot-scope="scope">
                <el-switch
                  @change="isShowHandle($event, scope.row.classifyCode)"
                  v-model="scope.row.isShow"
                  active-color="#fb8053"
                  inactive-color="#dcdfe6"
                >
                </el-switch>
              </template>
            </el-table-column>

            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="editGoodsClassifyHandle(scope.row.classifyCode)"
                  >编辑</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  @click="deleteGoodsClassifyHandle(scope.row.classifyCode)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </el-card>

      <add-goods-classify
        v-if="addGoodsClassifyVisible"
        ref="addGoodsClassify"
        @func="getServiceClassifyList"
      ></add-goods-classify>
      <edit-goods-classify
        v-if="editGoodsClassifyVisible"
        ref="editGoodsClassify"
        @func="getServiceClassifyList"
      ></edit-goods-classify>
    </div>
  </div>
</template>

<script>
import AddGoodsClassify from "./add-goods-classify";
import EditGoodsClassify from "./edit-goods-classify";

export default {
  components: { AddGoodsClassify, EditGoodsClassify },
  data() {
    return {
      addGoodsClassifyVisible: false,
      editGoodsClassifyVisible: false,
      classifyList: []
    };
  },
  methods: {
    addGoodsClassifyHandle() {
      this.addGoodsClassifyVisible = true;
      this.$nextTick(() => {
        this.$refs.addGoodsClassify.init();
      });
    },
    editGoodsClassifyHandle(classifyCode) {
      this.editGoodsClassifyVisible = true;
      this.$nextTick(() => {
        this.$refs.editGoodsClassify.init(classifyCode);
      });
    },
    deleteGoodsClassifyHandle(classifyCode) {
      this.$confirm("确定删除选中商品分类", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$http
          .get(
            `hssgoodsadmin/serviceClassify/deleteGoodsClassify?classifyCode=${classifyCode}`
          )
          .then(({ success, errorMsg }) => {
            if (success) {
              this.getServiceClassifyList();
              this.$message({
                type: "success",
                message: "删除成功!"
              });
            } else {
              this.$message({
                type: "error",
                message: errorMsg
              });
            }
          });
      });
    },
    isShowHandle(event, classifyCode) {
      this.$http.get(
        `hssgoodsadmin/serviceClassify/isShowClassify?classifyCode=${classifyCode}&isShow=${event}`
      );
    },
    async getServiceClassifyList() {
      const { data } = await this.$http.get(
        "hssgoodsadmin/serviceClassify/getServiceClassifyList"
      );
      this.classifyList = data;
    }
  },
  created() {
    this.getServiceClassifyList();
  }
};
</script>

<style scoped>
.herdertop {
  height: 8vh;
  display: flex;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
}
.topImg {
  margin-right: 20px;
}
</style>
